<template>
  <div class="l-tab-page pd-8" style="overflow-y: auto;padding-bottom: 0;">
    <el-row :gutter="8">
      <el-col :span="12">
        <el-card class="mb-8">
          <div slot="header">
            <span>地区年度财政收入统计图</span>
          </div>
          <l-echarts :option="lineAndPie" style="height:400px" />
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card class="mb-8">
          <div slot="header">
            <span>某市地区温度降雨量混合图</span>
          </div>
          <l-echarts :option="barAndLine" style="height:400px" />
        </el-card>
      </el-col>

      <el-col :span="24">
        <el-card class="mb-8">
          <div slot="header">
            <span>echarts网站用户活动统计图</span>
          </div>
          <l-echarts :option="barAndPie" style="height:600px" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
    };
  },
  computed: {
    // 地区年度财政收入统计图
    lineAndPie() {
      let option = {
        legend: {},
        tooltip: {
          trigger: "axis",
          showContent: false,
        },
        dataset: {
          source: [
            ["product", "2012", "2013", "2014", "2015", "2016", "2017"],
            ["工业", 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
            ["农业", 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
            ["手工业", 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
            ["服务业", 25.2, 37.1, 41.2, 18, 33.9, 49.1],
          ],
        },
        xAxis: { type: "category" },
        yAxis: { gridIndex: 0 },
        grid: { top: "55%" },
        series: [
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" },
          },
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" },
          },
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" },
          },
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" },
          },
          {
            type: "pie",
            id: "pie",
            radius: "30%",
            center: ["50%", "25%"],
            emphasis: {
              focus: "self",
            },
            label: {
              formatter: "{b}: {@2012} ({d}%)",
            },
            encode: {
              itemName: "product",
              value: "2012",
              tooltip: "2012",
            },
          },
        ],
      };
      return option;
    },
    // 地区温度降雨量混合图
    barAndLine() {
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        legend: {
          data: ["地区a", "地区b", "气温"],
        },
        xAxis: [
          {
            type: "category",
            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "降水量",
            axisLabel: {
              formatter: "{value} ml",
            },
          },
          {
            type: "value",
            name: "气温",
            axisLabel: {
              formatter: "{value} °C",
            },
          },
        ],
        series: [
          {
            name: "地区a",
            type: "bar",
            tooltip: {
              valueFormatter: function(value) {
                return value + " ml";
              },
            },
            data: [
              2.0,
              4.9,
              7.0,
              23.2,
              25.6,
              76.7,
              135.6,
              162.2,
              32.6,
              20.0,
              6.4,
              3.3,
            ],
            itemStyle: {
              normal: {
                barBorderRadius: [10, 10, 0, 0],
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    { offset: 0, color: "#4facfe" },
                    { offset: 1, color: "#00f2fe" },
                  ],
                },
              },
            },
          },
          {
            name: "地区b",
            type: "bar",
            tooltip: {
              valueFormatter: function(value) {
                return value + " ml";
              },
            },
            data: [
              2.6,
              5.9,
              9.0,
              26.4,
              28.7,
              70.7,
              175.6,
              182.2,
              48.7,
              18.8,
              6.0,
              2.3,
            ],
            itemStyle: {
              normal: {
                barBorderRadius: [10, 10, 0, 0],
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    { offset: 0, color: "#43e97b" },
                    { offset: 1, color: "#38f9d7" },
                  ],
                },
              },
            },
          },
          {
            name: "气温",
            type: "line",
            smooth: true,
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function(value) {
                return value + " °C";
              },
            },
            data: [
              2.0,
              2.2,
              3.3,
              4.5,
              6.3,
              10.2,
              20.3,
              23.4,
              23.0,
              16.5,
              12.0,
              6.2,
            ],
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: "#f77062" },
                { offset: 1, color: "#fe5196" },
              ],
            },
          },
        ],
      };
      return option;
    },
    // 网站用户活动统计图
    barAndPie() {
      const builderJson = {
        all: 10887,
        charts: {
          map: 3237,
          lines: 2164,
          bar: 7561,
          line: 7778,
          pie: 7355,
          scatter: 2405,
          candlestick: 1842,
          radar: 2090,
          heatmap: 1762,
          treemap: 1593,
          graph: 2060,
          boxplot: 1537,
          parallel: 1908,
          gauge: 2107,
          funnel: 1692,
          sankey: 1568,
        },
        components: {
          geo: 2788,
          title: 9575,
          legend: 9400,
          tooltip: 9466,
          grid: 9266,
          markPoint: 3419,
          markLine: 2984,
          timeline: 2739,
          dataZoom: 2744,
          visualMap: 2466,
          toolbox: 3034,
          polar: 1945,
        },
        ie: 9743,
      };
      const downloadJson = {
        "echarts.min.js": 17365,
        "echarts.simple.min.js": 4079,
        "echarts.common.min.js": 6929,
        "echarts.js": 14890,
      };
      const themeJson = {
        "dark.js": 1594,
        "infographic.js": 925,
        "shine.js": 1608,
        "roma.js": 721,
        "macarons.js": 2179,
        "vintage.js": 1982,
      };

      let option = {
        tooltip: {},
        title: [
          {
            text: "在线构建",
            subtext: "总计 " + builderJson.all,
            left: "25%",
            textAlign: "center",
          },
          {
            text: "各版本下载",
            subtext:
              "总计 " +
              Object.keys(downloadJson).reduce(function(all, key) {
                return all + downloadJson[key];
              }, 0),
            left: "75%",
            textAlign: "center",
          },
          {
            text: "主题下载",
            subtext:
              "总计 " +
              Object.keys(themeJson).reduce(function(all, key) {
                return all + themeJson[key];
              }, 0),
            left: "75%",
            top: "50%",
            textAlign: "center",
          },
        ],
        grid: [
          {
            top: 50,
            width: "50%",
            bottom: "45%",
            left: 10,
            containLabel: true,
          },
          {
            top: "55%",
            width: "50%",
            bottom: 50,
            left: 10,
            containLabel: true,
          },
        ],
        xAxis: [
          {
            type: "value",
            max: builderJson.all,
            splitLine: {
              show: false,
            },
          },
          {
            type: "value",
            max: builderJson.all,
            gridIndex: 1,
            splitLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "category",
            data: Object.keys(builderJson.charts),
            axisLabel: {
              interval: 0,
              rotate: 0,
            },
            splitLine: {
              show: false,
            },
          },
          {
            gridIndex: 1,
            type: "category",
            data: Object.keys(builderJson.components),
            axisLabel: {
              interval: 0,
              rotate: 0,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            type: "bar",
            stack: "chart",
            z: 3,
            label: {
              position: "right",
              show: true,
            },
            data: Object.keys(builderJson.charts).map(function(key) {
              return builderJson.charts[key];
            }),
            itemStyle: {
              normal: {
                barBorderRadius: [0, 10, 10, 0],
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    { offset: 0, color: "#04befe" },
                    { offset: 1, color: "#4481eb" },
                  ],
                },
              },
            },
          },
          {
            type: "bar",
            stack: "chart",
            silent: true,
            itemStyle: {
              color: "#eee",
            },
            data: Object.keys(builderJson.charts).map(function(key) {
              return builderJson.all - builderJson.charts[key];
            }),
          },
          {
            type: "bar",
            stack: "component",
            xAxisIndex: 1,
            yAxisIndex: 1,
            z: 3,
            label: {
              position: "right",
              show: true,
            },
            data: Object.keys(builderJson.components).map(function(key) {
              return builderJson.components[key];
            }),
            itemStyle: {
              normal: {
                barBorderRadius: [0, 10, 10, 0],
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    { offset: 0, color: "#8ddad5" },
                    { offset: 1, color: "#00cdac" },
                  ],
                },
              },
            },
          },
          {
            type: "bar",
            stack: "component",
            silent: true,
            xAxisIndex: 1,
            yAxisIndex: 1,
            itemStyle: {
              color: "#eee",
            },
            data: Object.keys(builderJson.components).map(function(key) {
              return builderJson.all - builderJson.components[key];
            }),
          },
          {
            type: "pie",
            radius: [0, "30%"],
            center: ["75%", "25%"],
            color: ["#ff9a9e", "#a18cd1", "#f6d365", "#c2e9fb", "#ff0844"],
            data: Object.keys(downloadJson).map(function(key) {
              return {
                name: key.replace(".js", ""),
                value: downloadJson[key],
              };
            }),
          },
          {
            type: "pie",
            radius: [0, "30%"],
            center: ["75%", "75%"],
            color: [
              "#f093fb",
              "#4facfe",
              "#43e97b",
              "#30cfd0",
              "#764ba2",
              "#16a085",
            ],
            data: Object.keys(themeJson).map(function(key) {
              return {
                name: key.replace(".js", ""),
                value: themeJson[key],
              };
            }),
          },
        ],
      };
      return option;
    },
  },
};
</script>
